﻿<UserControl x:Class="TheVerge.Phone.Controls.MediaControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:con="clr-namespace:TheVerge.Phone.Controls"
    xmlns:conv="clr-namespace:TheVerge.Phone.Converters"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">
    <UserControl.Resources>
        <DataTemplate x:Key="photosDataTemplate">
            <Button Click="PhotoGallery_Click" Style="{StaticResource clearButtonStyle}">
                <Grid Margin="0,6">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Image Source="/../Images/PhotoPlaceHolder.png" Grid.Row="1" />
                    <Image Source="{Binding CoverPhoto}" Grid.Row="1" />

                    <Border Background="{StaticResource PhoneAccentBrush}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding Title}" Margin="12" FontWeight="Bold" Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap" />
                            <TextBlock Text="{Binding TotalItems}" VerticalAlignment="Top" Padding="2" FontSize="{StaticResource PhoneFontSizeSmall}" />
                        </Grid>
                    </Border>
                </Grid>
            </Button>
        </DataTemplate>

        <conv:BooleanObjectConverter x:Key="podcastConv" TrueValue="{StaticResource dtPause}" FalseValue="{StaticResource dtPlay}" />
        <conv:BooleanObjectConverter x:Key="podcastItemConv">
            <conv:BooleanObjectConverter.TrueValue>
                <DataTemplate>
                    <Grid>
                        <Ellipse Height="40" Width="40" Fill="{StaticResource PhoneAccentBrush}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="4" />
                        <Rectangle Fill="{StaticResource PhoneForegroundBrush}">
                            <Rectangle.OpacityMask>
                                <ImageBrush ImageSource="/Images/appbar.transport.pause.rest.png"/>
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </Grid>
                </DataTemplate>
            </conv:BooleanObjectConverter.TrueValue>
            <conv:BooleanObjectConverter.FalseValue>
                <DataTemplate>
                    <Grid>
                        <Ellipse Height="40" Width="40" Fill="{StaticResource PhoneChromeBrush}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="4" />
                        <Rectangle Fill="{StaticResource PhoneForegroundBrush}">
                            <Rectangle.OpacityMask>
                                <ImageBrush ImageSource="/Images/appbar.transport.play.rest.png"/>
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </Grid>
                </DataTemplate>
            </conv:BooleanObjectConverter.FalseValue>
        </conv:BooleanObjectConverter>

        <DataTemplate x:Key="podcastItemTemplate">
            <Border BorderBrush="{StaticResource PhoneSubtleBrush}" BorderThickness="0,0,0,1" Padding="2">
                <Grid Margin="12">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Button Click="PodcastPlay_Click" Style="{StaticResource mediaButton}" ContentTemplate="{Binding IsPlaying, Converter={StaticResource podcastItemConv}}" />

                    <Button Style="{StaticResource clearButtonStyle}" Click="PodcastSelect_Click" Grid.Column="1" HorizontalContentAlignment="Left">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>

                            <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap" />
                            <TextBlock Text="{Binding PublishedOn, StringFormat='POSTED ON {0:d}'}" Style="{StaticResource PhoneTextSubtleStyle}" Grid.Row="1" />
                        </Grid>
                    </Button>

                    <con:NumberCommentsControl DataContext="{Binding NumberOfComments}" Grid.Column="2" />
                </Grid>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="photoItemTemplate" />

        <DataTemplate x:Key="videosDataTemlate">
            <Border BorderBrush="{StaticResource PhoneSubtleBrush}" BorderThickness="0,0,0,1" Padding="2">
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    
                    <Button Click="Video_Click" Style="{StaticResource clearButtonStyle}" Margin="0">
                        <Grid>
                            <Image Source="{Binding PhotoUrl}" Height="80" Width="80" />
                            <Image Source="/Images/appbar.transport.play.rest.png" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Ellipse Height="40" Width="40" Stroke="White" StrokeThickness="4" />
                        </Grid>
                    </Button>

                    <Button Click="VideoUrl_Click" Style="{StaticResource clearButtonStyle}" Grid.Column="1" Margin="0" 
                            HorizontalContentAlignment="Left"
                            VerticalContentAlignment="Top">
                        <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap" />
                    </Button>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

    <Grid Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Background="Black">
            <Image Height="44" Stretch="Uniform" Source="/Images/TheVerge_DarkBackground.png" />
        </Border>

        <controls:Pivot x:Name="mediaPiv"
            TitleTemplate="{StaticResource PivotTitleTemplate}" HeaderTemplate="{StaticResource headerTemplate}" Grid.Row="1" SelectionChanged="mediaPiv_SelectionChanged">
            <controls:PivotItem Header="videos" DataContext="{Binding Videos}">
                <con:InfiniteScroller ItemTemplate="{StaticResource videosDataTemlate}" />
            </controls:PivotItem>
            <controls:PivotItem Header="podcasts" DataContext="{Binding Podcasts}">
                <con:InfiniteScroller ItemTemplate="{StaticResource podcastItemTemplate}" />
            </controls:PivotItem>
            <controls:PivotItem Header="photos" DataContext="{Binding Photos}">
                <con:InfiniteScroller ItemTemplate="{StaticResource photosDataTemplate}" />
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>
</UserControl>
